<template>
  <div class="container">
    <h3>{{message}}</h3>
    <div  class="form">
      <el-form ref="form" :model="rapair" label-width="80px">
        <el-form-item label="地址">
          <el-input v-model="rapair.rapairLocation"></el-input>
        </el-form-item>
        <div style="margin: 50px 0;"></div>
        <el-form-item label="问题描述">
          <el-input type="textarea" v-model="rapair.rapairContent" class="tex" style="display: none"  maxlength="50"
                    show-word-limit></el-input>
          <div style="border: 1px solid #ccc;">
            <div style="border: 1px solid #ccc;">
              <!--v-model 可以看成 :value 和 @input ，子组件 my-editor 通过父传子 props 接收 value， 子传父 this.$emit( ) 传递最新值到 父组件 @input 。v-model 语法糖简化了父组件代码的书写。-->
              <my-editor v-model="rapair.rapairContent" :server="uploadServer"></my-editor>
            </div>
          </div>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">提交</el-button>
          <el-button @click="resetForm">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import MyEditor from "@/components/MyEditor";
export default {
  components: {MyEditor},
  name: "WebRapair",
  data() {
    return{
      rapair:{
        id:this.$route.query.id,
        residentId:null,
        rapairLocation:null,
        rapairContent:null,
      },
      message:'添加报修',
      resident:{
        id:null,
      },
      //在线编辑器配置
      toolbarConfig: {
        excludeKeys:[
          'group-video'//去掉视频上传的工具栏
        ]
      },
      editor:null,
      uploadServer:'http://localhost:8080/web/uploadWangEditorPic',
      mode: 'default',
    }
  },
  created() {
    if (this.$route.query.id) {
      this.message = '修改报修',
      this.getRapairById();
    }
    this.getResident();
  },
  methods: {
    //在线编辑器操作
    onCreated(editor) {
      this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
    },
    //自定义上传上传图片
    /*          uploadImg(file, insertFn){
                  let imgData = new FormData();
                  imgData.append('file', file);
                  //调接口，上传图片
                  editorUpImg(imgData).then(res => {
                      if(res.code == 0){
                          //上传后得到图片 url alt href 最后插入图片
                          insertFn(res.data);
                      }else{
                      }
                  })

    },*/
    //用户操作
    getResident(){
      //获取用户信息
      this.resident = JSON.parse(localStorage.getItem("resident"));
      this.rapair.residentId=this.resident.id;
    },
    onSubmit() {
        this.$axios.post("/web/add",this.rapair).then(res=>{
          this.$router.push("/web/rapairRecord");
        });
    },
    getRapairById(){
      this.$axios.get("/web/"+this.rapair.id).then(res=>{
          this.rapair=res.data.rapair;
          console.log(res.data);
      });
    },
    resetForm(){
      this.rapair.rapairContent=null;
      this.rapair.rapairLocation=null;
    }
  }
}
</script>

<style scoped>
  h3{
    font-style: italic;
  }
  .form{
    width: 500px;
    height: 900px !important;
    margin-left: 440px;
  }
</style>